<!-- 需求列表  -->
<template>
  <pageHeader title="生产排程" :breadCrumb="['生产管理', '生产排程']" />
  <div class="search-box">
    <a-space> </a-space>
    <a-space>
      <!-- <a-button type="outline" @click="resetting">
        <template #icon> <icon-refresh /> </template>重置
      </a-button> -->
      <HeaderSettingCopy
        v-model:headerValues="headerValues"
        :define-headers="ProductionSchedulingHerders.herders"
        :type="ProductionSchedulingHerders.type"
      />
    </a-space>
  </div>
  <tableTurn style="padding: 0 10px" :tableData="getDemandAll" ref="tableRef">
    <a-table-column :width="70" align="center" title="序号">
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column
      v-for="header in headerValues"
      :key="header.name"
      :width="header.width || 200"
      :title="header.name"
      :fixed="header.fixed"
      :data-index="header.code"
      align="center"
      :ellipsis="true"
      :tooltip="{
        position: 'top',
      }"
    >
      <template #cell="{ record }" v-if="!header.code">
        <template v-if="header.name === '紧急等级'">
          <a-typography-text type="primary" v-if="record.emergencyLevel === 1">
            一般
          </a-typography-text>
          <a-typography-text bold v-if="record.emergencyLevel === 2">
            紧急
          </a-typography-text>
          <a-typography-text type="warning" v-if="record.emergencyLevel === 3">
            加急
          </a-typography-text>
          <a-typography-text type="danger" v-if="record.emergencyLevel === 4">
            特急
          </a-typography-text>
        </template>
        <template v-if="header.name === '投入物料'">
          {{
            record.inputMaterials
              ?.map(({ inputMaterialsName }: any) => inputMaterialsName)
              .join('-')
          }}
        </template>
      </template>
    </a-table-column>
    <a-table-column :width="150" fixed="right" title="操作" align="center">
      <template #cell="{ record }">
        <a-space>
          <!-- <a-link @click="toManualScheduling(record)"> 手动排程 </a-link> -->

          <!-- <a-link @click="toManualScheduling(record)"> 排程详情 </a-link> -->

          <a-tooltip content="手动排程">
            <IconFont
              type="icon-shoudongzhuaqushuju"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="toManualScheduling(record)"
            />
          </a-tooltip>

          <a-tooltip content="排程详情">
            <IconFont
              type="icon-details-def"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="toManualScheduling(record)"
            />
          </a-tooltip>
          <!-- <a-popconfirm
              content="是否删除该数据?"
              type="error"
              @ok="del(record.id)"
            >
              <a-link status="danger"> 删除 </a-link>
            </a-popconfirm> -->
        </a-space>
      </template>
    </a-table-column>
  </tableTurn>
  <!-- <Calendar>
      <template #day><a-input-number :min="1" /></template>
    </Calendar> -->
</template>

<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import { GetProduceSchedulingPage } from '@/api/produce-management/OrderPlanning';

  import Dayjs from 'dayjs';
  import { ProductionSchedulingHerders } from '@/utils/tableHerders';
  import { Message } from '@arco-design/web-vue';

  const router = useRouter();
  let searchForm = reactive<any>({});
  const tableRef = ref();

  let refModal = ref();
  const toManualScheduling = (data: any) => {
    localStorage.setItem('ManualSchedulingForm', JSON.stringify(data));
    router.push({
      name: 'ManualScheduling',
    });
  };
  const getDemandAll = async (page: any) => {
    try {
      let res = await GetProduceSchedulingPage({
        ...page,
        ...searchForm,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      return Promise.reject();
    }
  };

  const Search = () => {
    tableRef.value.loadData();
  };
  const resetting = () => {
    for (const key in searchForm) {
      delete searchForm[key];
    }
    tableRef.value.loadData();
  };
  const del = async (id: number) => {
    // await DelStation({ id });
    tableRef.value.loadData();
  };

  let headerValues = ref<any[]>([]);
</script>

<style scoped lang="less">
  .search-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: -7px;
  }
</style>
